<template>
  <el-card header="学员管理">
    <el-row>

      <!--搜索表单栏-->
      <el-col :span="24">
        <el-form :inline="true" :model="query" size="small">
          <el-form-item label="姓名">
            <el-input v-model="query.studentName" placeholder="请输入..." />
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="query.classId" placeholder="请选择">
              <el-option label="计算机一班" value="1" />
              <el-option label="软件工程" value="2" />
              <el-option label="通信工程" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="handldQuery"
            >查询</el-button>
            <el-button
              size="small"
              icon="el-icon-refresh"
              @click="resetQuery"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <!--添加及批量删除按钮栏-->
      <el-col :span="24">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          size="small"
        >新增</el-button>
        <el-button type="danger" icon="el-icon-delete" size="small">批量删除</el-button>
      </el-col>

      <!--表格数据展示栏-->
      <el-col :span="24">
        <el-table :data="studentList" stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="studentId" label="学生Id" width="80" />
          <el-table-column prop="studentName" label="学生姓名" width="120" />
          <el-table-column prop="studentNo" label="学号" width="150" />
          <el-table-column prop="gender" label="性别" width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.gender===1" size="small">男</el-tag>
              <el-tag v-else size="small" type="success">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80" />
          <el-table-column prop="className" label="班级" width="120" />
          <el-table-column prop="registerTime" label="注册时间" width="150" />
          <el-table-column prop="address" label="地址" />
          <el-table-column label="操作" width="180">
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-view"
                  @click="handleView(scope)"
                >查看</el-button>
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEidt(scope)"
                >编辑</el-button>
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>

      <!--分页栏-->
      <el-col :span="24">
        <el-pagination
          background
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="page.total"
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getListS } from '@/api/student'
export default {
  name: 'Lists',

  data() {
    return {
      // 列表搜索数据
      query: {
        studentName: '',
        classId: null
      },
      // 学生数据源
      studentList: [],
      // 选中的数据
      selectedStudentList: [],
      page: {
        pageSize: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30, 50],
        total: 0
      }
    }
  },

  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getListS(this.page.currentPage, this.page.pageSize).then(response => {
        this.studentList = response.data.data
        this.page.total = response.data.total
      })
    },
    handldQuery() {
      this.$message({
        message: `查询姓名为${this.query.studentName}、
                 班级Id为${this.query.classId}的学员数据`,
        type: 'success'
      })
    },
    // 选中状态改变事件
    handleSelectionChange(selectedList) {
      this.selectedStudentList = selectedList
    },
    // 重置查询条件
    resetQuery() {
      this.query.studentName = ''
      this.query.classId = null
    },
    // 每页数据条数改变事件
    sizeChange(pageSize) {
      debugger
      this.page.pageSize = pageSize
      this.fetchData()
    },
    // 查看
    handleView(scope) {
      this.$message({
        type: 'success',
        message: `查看姓名为${scope.row.studentName}的学生信息`
      })
    },

    // 编辑
    handleEdit(scope) {
      this.$message({
        type: 'success',
        message: `编辑姓名为${scope.row.studentName}的学生信息`
      })
    },

    // 删除
    handleDelete(scope) {
      this.$message({
        type: 'success',
        message: `删除姓名为${scope.rows.studentName}的学生信息`
      })
    },
    // 当前页数据改变事件
    currentChange(currentPage) {
      this.page.currentPage = currentPage
      this.fetchData()
    },
    // 新增按钮点击事件
    handleAdd() {
      this.$message({
        message: '添加新学员',
        type: 'success'
      })
    },

    // 批量删除
    handleBatchDelete() {
      this.$message.error('批量删除数据')
    }
  }
}
</script>
